@extends('Home/Layout/base_login_resgister')

@section('title', '注册页面')

@section('css')

    <style>
    .codeimg{
        position: absolute; top: 0; right: 0; width: 126px; height: 52px; line-height: 52px; text-align: center; 
    }        

    </style>
@endsection

@section('main')
    <div class="main-wrap">
        <div class="wrapper">
            <div class="center-box">
                <form action="javascript:;">
                    <div class="box-hd">
                        <span class="tit">用户注册</span>
                        <a href="{{url("/login")}}">账号登陆</a>
                    </div>
                    <label class="txtin-box">
                        <input id="checkuser" class="txtin" type="text" name="username" placeholder="用户名" />
                    </label>
                    <label class="txtin-box">
                        <input id="checkemail" class="txtin" type="email" name="email" placeholder="邮箱" />
                    </label>
                    <label class="txtin-box">
                        <input id="checkphone" class="txtin" type="text" name="phone" placeholder="手机" />
                    </label>
                    <label class="txtin-box txtin-box-code">
                        <input id='phonecode' class="txtin" type="text" name="phonecode" placeholder="验证码" />
                        <input class="get-yzm" type='button' value="获取验证码"> 
                    </label>
                    <label class="txtin-box txtin-box-code">
                        <input id='code' class="txtin" type="text" name="code" placeholder="验证码" />
                        <img class="codeimg" src="{{url('/makecode')}}" onclick="this.src='{{url('/makecode')}}?'+Math.random()"  title="看不清楚，再点一次">
                    </label>
                    <label class="txtin-box">
                        <input id='checkpwd' class="txtin" type="password" name="pwd" placeholder="输入密码" />
                    </label>
                    <label class="txtin-box">
                        <input id='confirmPwd' class="txtin" type="password" name="confirmPwd" placeholder="确认密码" />
                    </label>
                    <div class="clearfix tool">
                        <label class="check"><input class="checkagree" type="checkbox" name="agree" value="" />我已阅读并同意智迈科技《<a id='agree' href="">服务协议</a>》</label>
                    </div>
                    <input class="tj" type="submit" value="注&ensp;册" />
                    <div class="other-way clearfix">
                        <a class="item first" href="">
                            <img src="{{asset('Home/img/login/weixin.jpg')}}" alt="" class="ico" />
                            <span class="label">微信</span>
                        </a>
                        <a class="item" href="">
                            <img src="{{asset('Home/img/login/qq.jpg')}}" alt="" class="ico" />
                            <span class="label">QQ</span>
                        </a>
                        <a class="item" href="">
                            <img src="{{asset('Home/img/login/sina.jpg')}}" alt="" class="ico" />
                            <span class="label">微博</span>
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('footer-js')
<script type="text/javascript">
        //发送手机短信验证码
        wait = 30;
        var InterValObj; //timer变量，控制时间  

        $('.get-yzm').on('click', function(){
            var uphone = $('input[name="phone"]').val();

            $(this).attr('disabled', true).val(wait+'秒后重新发送');
            InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次


            $.axpost(
                'post',
                '{{url("/send")}}',
                'phone='+uphone+'&_token={{csrf_token()}}',
                function (data) { 
                    
                }

            );

            //timer处理函数  
            function SetRemainTime() {  
            if (wait < 1) {         
                window.clearInterval(InterValObj);//停止计时器 
                wait = 30;
                $('.get-yzm').attr("disabled", false);//启用按钮  
                $('.get-yzm').val("重新发送验证码");  
            } else {
                wait = wait - 1; 
                $('.get-yzm').val(wait+'秒后重新发送');  
            }
        }
    });


        //赋值给服务协议验证
        $('.iCheck-helper').on('click', function(){
            $('.checkagree').val(1);
        });

        //检测用户名、邮箱、手机是否存在的提示处理
        $("#checkuser, #checkemail, #checkphone").on('blur', function() {
            var uname = $('input[name="username"]').val();
            var uemail = $('input[name="email"]').val();
            var uphone = $('input[name="phone"]').val();
        // 使用封装后的axpost，封装在父模板
          $.axpost(
            'post',
            '{{url("/doregister")}}',
            'name='+uname+'&email='+uemail+'&phone='+uphone+'&_token={{csrf_token()}}',
            function (data) {

                //验证是否用户存在错误提示
                if (data.status==1404){

                    layer.tips(data.msg, '#checkuser', {tips:[2, '#FF0000']});
                }

                //验证是否邮箱存在错误提示
                if (data.status==1403){

                    layer.tips(data.msg, '#checkemail', {tips:[2, '#FF0000']});
                }

                //验证是否电话存在错误提示
                if (data.status==1402){

                    layer.tips(data.msg, '#checkphone', {tips:[2, '#FF0000']});
                }
            }

        );
    });

    //执行注册
    $('.tj').on('click', function() {
        var index = layer.load(3, {time: 2000});
        var uname = $('input[name="username"]').val();
        var uemail = $('input[name="email"]').val();
        var uphone = $('input[name="phone"]').val();
        var uphonecode = $('input[name="phonecode"]').val();
        var ucode = $('input[name="code"]').val();
        var upwd = $('input[name="pwd"]').val();
        var uconfirmPwd = $('input[name="confirmPwd"]').val();
        var uagree = $('input[name="agree"]').val();
        
    $.axpost(
        'post',
        '{{url("/goregister")}}',
        'name='+uname+'&email='+uemail+'&phone='+uphone+'&_token={{csrf_token()}}'+'&phone='+uphone+'&phonecode='+uphonecode+'&code='+ucode+'&pwd='+upwd+'&confirmPwd='+uconfirmPwd+'&agree='+uagree,
            function (data) {
                if (data.status==1200) {

                    layer.alert(data.msg, {icon:6});
                    location.href = '{{url("/login")}}';
                }

                if (data.status==1400){
                    
                    layer.alert(data.msg, {icon:5});
                }

                if (data.status==1405){

                    layer.tips(data.msg, '#code', {tips:[4, '#FF0000']});
                }

                if (data.status==1406){

                    layer.tips(data.msg, '#phonecode', {tips:[4, '#FF0000']});
                }

                if (data.status==1407){

                    layer.tips(data.msg, '#confirmPwd', {tips:[2, '#FF0000']});
                }

            },

         function (tipString) {
                //console.log(tipString.responseText);
                //用户名的表单验证
                if (tipString.responseText) {

                    var tipObj = JSON.parse(tipString.responseText).errors;
                    //console.log(tipObj);
                   
                   if (tipObj['name']) {

                        layer.tips(tipObj['name'], '#checkuser', {
                            tips:[2, '#FF0000'],
                            tipsMore: true

                        });
                   }

                   if (tipObj['email']) {
                        layer.tips(tipObj['email'], '#checkemail', {
                            tips:[2, '#FF0000'],
                            tipsMore: true
                        });
                    }

                    if (tipObj['phone']) {
                        layer.tips(tipObj['phone'], '#checkphone', {
                            tips:[2, '#FF0000'],
                            tipsMore: true
                        });
                    }
                    
                    if (tipObj['phonecode']) {
                        layer.tips(tipObj['phonecode'], '#phonecode', {
                            tips:[4, '#FF0000'],
                            tipsMore: true
                        });
                    }
                    
                    if (tipObj['code']) {
                        layer.tips(tipObj['code'], '#code', {
                            tips:[4, '#FF0000'],
                            tipsMore: true
                        });
                    }
                    
                    if (tipObj['pwd']) {
                        layer.tips(tipObj['pwd'], '#checkpwd', {
                            tips:[2, '#FF0000'],
                            tipsMore: true
                        });
                    }

                    if (tipObj['confirmPwd']) {
                        layer.tips(tipObj['confirmPwd'], '#confirmPwd', {
                            tips:[2, '#FF0000'],
                            tipsMore: true
                        });
                    }

                    if (tipObj['agree']) {
                        layer.tips(tipObj['agree'], '#agree', {
                            tips:[2, '#FF0000'],
                            tipsMore: true
                        });
                    }

                }

            }
        );
    });
</script>

@endsection
